// get plus and minus buttons
const plus = document.querySelectorAll(".plus")
const minus = document.querySelectorAll(".minus")

// get timeArea div
const timeArea = document.getElementsByClassName("timeArea")[0]
const title = document.querySelector(".timeArea>h1")

// get btnArea div
const btnArea = document.getElementsByClassName("btnArea")[0]

const intText = document.getElementById("intText")

// get set time button
const set = document.getElementById("set")
const word = document.getElementById("word")

// get controls div
const controls = document.getElementById("controls")

// get button controls
const play = document.getElementById("play")
const pause = document.getElementById("pause")
const rewriting = document.getElementById("rewriting")
const reply = document.getElementById("reply")
const audioDom = document.getElementById("myAudio")
// get time paragraph
// const hoursDiv = document.getElementById("hours").children[1]
const minutesDiv = document.getElementById("minutes").children[1]
const secondsDiv = document.getElementById("seconds").children[1]

btnArea.style.top = timeArea.offsetTop + timeArea.offsetHeight / 2 + "px"

window.onresize = function () {
  btnArea.style.top = timeArea.offsetTop + timeArea.offsetHeight / 2 + "px"
  controls.style.top = timeArea.offsetTop + timeArea.offsetHeight / 2 + "px"
}

// plus the time
plus.forEach((elem) => {
  elem.onclick = () => {
    let value = elem.parentElement.children[1]
    console.log(elem.parentElement.children[1])

    if (elem.parentElement.className === "hours") {
      if (value.textContent == 24) {
        value.textContent = window.parseInt(value.textContent)
      } else {
        value.textContent = window.parseInt(value.textContent) + 1
      }

      if (value.textContent <= 9) {
        value.textContent = "0" + window.parseInt(value.textContent)
      }
    }

    if (
      elem.parentElement.className === "minutes" ||
      elem.parentElement.className === "seconds"
    ) {
      if (value.textContent == 59) {
        value.textContent = window.parseInt(value.textContent)
      } else {
        value.textContent = window.parseInt(value.textContent) + 1
      }

      if (value.textContent <= 9) {
        value.textContent = "0" + window.parseInt(value.textContent)
      }
    }
  }
})

// minus the time
minus.forEach((elem) => {
  elem.onclick = () => {
    let value = elem.parentElement.children[1]

    if (value.textContent == 0) {
      value.textContent = window.parseInt(value.textContent)
    } else {
      value.textContent = window.parseInt(value.textContent) - 1
    }

    if (value.textContent <= 9) {
      value.textContent = "0" + window.parseInt(value.textContent)
    }
  }
})
// word.onclick = () => {
//   let text = prompt('请输入倒计时目的')
//   if (text) {
//     intText.innerText = text
//   }
// }

// set the time
set.onclick = () => {
  title.className = "marBom"
  const hou = 0
  const min = (hou + window.parseInt(minutesDiv.textContent)) * 60
  let sec = min + window.parseInt(secondsDiv.textContent)

  let saveSec = sec

  if (sec === 0) {
    alert("请设定时间")
    return
  } else {
    audioDom.play()

    // document.getElementById("hours").className = "hours tag"
    document.getElementById("minutes").className = "hours tag"

    btnArea.style.display = "none"
    controls.style.display = "block"

    plus.forEach((elem) => {
      elem.style.display = "none"
    })

    minus.forEach((elem) => {
      elem.style.display = "none"
    })

    var setIn = setInterval(countdown, 1000)
    controls.style.top = timeArea.offsetTop + timeArea.offsetHeight / 2 + "px"
  }

  // countdown function
  function countdown() {
    if (sec >= 0) {
      let minutes = Math.floor(sec / 60)
      let hours = Math.floor(minutes / 60)
      let seconds = sec % 60

      minutes %= 60

      if (hours <= 9) hours = "0" + hours
      if (minutes <= 9) minutes = "0" + minutes
      if (seconds <= 9) seconds = "0" + seconds

      // hoursDiv.textContent = hours
      minutesDiv.textContent = minutes
      secondsDiv.textContent = seconds

      sec--
    } else {
      clearInterval(setIn)
    }
  }

  countdown()

  // paused the count down timer
  pause.onclick = () => {
    play.style.display = "inline-block"
    pause.style.display = "none"
    audioDom.pause()
    clearInterval(setIn)
  }

  // played the count down timer
  play.onclick = () => {
    pause.style.display = "inline-block"
    play.style.display = "none"
    audioDom.play()

    setIn = setInterval(countdown, 1000)
  }

  // rewriting the time
  rewriting.onclick = () => {
    title.className = ""
    document.getElementById("hours").className = "hours"
    document.getElementById("minutes").className = "hours"
    btnArea.style.display = "inline-block"
    controls.style.display = "none"

    plus.forEach((elem) => {
      elem.style.display = "block"
    })

    minus.forEach((elem) => {
      elem.style.display = "block"
    })

    clearInterval(setIn)
  }

  // reply the countdown
  reply.onclick = () => {
    sec = saveSec
  }
}
